import React, { useState } from 'react';
import {
  Card,
  Select,
  Button,
  Progress,
  Table,
  Row,
  Col,
  Typography,
  Space,
  Tag,
  Avatar,
  Input,
  Form,
  message
} from 'antd';
import {
  PlayCircleOutlined,
  RocketOutlined,
  ThunderboltOutlined,
  ExperimentOutlined,
  BarChartOutlined,
  StopOutlined,
  ReloadOutlined,
  TrophyOutlined
} from '@ant-design/icons';

const { Text } = Typography;
const { Option } = Select;

const ModelTraining = () => {
  const [form] = Form.useForm();
  const [selectedModel, setSelectedModel] = useState(null);
  const [batchSize, setBatchSize] = useState(32);
  const [learningRate, setLearningRate] = useState(0.001);
  const [epochs, setEpochs] = useState(100);
  const [optimizer, setOptimizer] = useState('adam');
  const [isTraining, setIsTraining] = useState(false);
  const [trainingProgress, setTrainingProgress] = useState(0);
  const [trainingComplete, setTrainingComplete] = useState(false);
  const [trainingResults, setTrainingResults] = useState(null);
  const [currentEpoch, setCurrentEpoch] = useState(0);
  const [trainingMetrics, setTrainingMetrics] = useState({
    trainLoss: 0,
    valLoss: 0,
    trainAcc: 0,
    valAcc: 0
  });

  // 模型列表
  const modelList = [
    {
      value: 'resnet50',
      label: 'ResNet50',
      size: '98MB',
      type: '图像分类',
      params: '25.6M',
      description: '深度残差网络'
    },
    {
      value: 'aconvnet',
      label: 'AConvNet',
      size: '14MB',
      type: '雷达识别',
      params: '3.7M',
      description: '自适应卷积网络'
    },
    {
      value: 'siamese_unet',
      label: 'Siamese U-Net',
      size: '440MB',
      type: '变化检测',
      params: '114M',
      description: '连体U型网络'
    },
    {
      value: 'cloud_net',
      label: 'Cloud-Net',
      size: '246MB',
      type: '云检测',
      params: '62.1M',
      description: '云检测网络'
    },
    {
      value: 'social_lstm',
      label: 'Social-LSTM',
      size: '47MB',
      type: '导航识别',
      params: '12.3M',
      description: '社交长短期记忆网络'
    },
    {
      value: 'faster_rcnn',
      label: 'Faster R-CNN',
      size: '81MB',
      type: '目标检测',
      params: '20.7M',
      description: '更快的区域卷积神经网络'
    },
    {
      value: 'unet',
      label: 'U-Net',
      size: '32MB',
      type: '图像分割',
      params: '8.2M',
      description: 'U型网络'
    },
    {
      value: 'srcnn',
      label: 'SRCNN',
      size: '77MB',
      type: '图像超分辨率重建',
      params: '19.4M',
      description: '超分辨率卷积神经网络'
    }
  ];

  // 优化器选项
  const optimizerOptions = [
    { value: 'adam', label: 'Adam' },
    { value: 'sgd', label: 'SGD' },
    { value: 'rmsprop', label: 'RMSprop' },
    { value: 'adamw', label: 'AdamW' },
    { value: 'adagrad', label: 'Adagrad' }
  ];

  // 获取选中模型信息
  const getSelectedModelInfo = () => {
    return modelList.find(model => model.value === selectedModel);
  };

  // 训练进度数据
  const getProgressData = () => {
    const selectedModelInfo = getSelectedModelInfo();

    if (!selectedModelInfo || !isTraining) {
      return [
        { key: '1', metric: '当前轮次', value: '-', target: '-' },
        { key: '2', metric: '训练损失', value: '-', target: '< 0.1' },
        { key: '3', metric: '验证损失', value: '-', target: '< 0.15' },
        { key: '4', metric: '训练精度', value: '-', target: '> 95%' },
        { key: '5', metric: '验证精度', value: '-', target: '> 90%' }
      ];
    }

    return [
      {
        key: '1',
        metric: '当前轮次',
        value: currentEpoch + '/' + epochs,
        target: epochs + ' 轮次'
      },
      {
        key: '2',
        metric: '训练损失',
        value: trainingMetrics.trainLoss.toFixed(4),
        target: '< 0.1'
      },
      {
        key: '3',
        metric: '验证损失',
        value: trainingMetrics.valLoss.toFixed(4),
        target: '< 0.15'
      },
      {
        key: '4',
        metric: '训练精度',
        value: trainingMetrics.trainAcc.toFixed(1) + '%',
        target: '> 95%'
      },
      {
        key: '5',
        metric: '验证精度',
        value: trainingMetrics.valAcc.toFixed(1) + '%',
        target: '> 90%'
      }
    ];
  };

  const progressColumns = [
    {
      title: '指标',
      dataIndex: 'metric',
      key: 'metric',
      width: '40%',
      render: (text) => React.createElement(Text, { strong: true }, text)
    },
    {
      title: '当前值',
      dataIndex: 'value',
      key: 'value',
      align: 'center',
      width: '30%',
      render: (text) => React.createElement(Text, {
        style: { color: isTraining ? '#1890ff' : '#666' }
      }, text)
    },
    {
      title: '目标',
      dataIndex: 'target',
      key: 'target',
      align: 'center',
      width: '30%',
      render: (text) => React.createElement(Tag, {
        color: 'green',
        size: 'small'
      }, text)
    }
  ];

  // 开始训练
  const handleStartTraining = () => {
    if (!selectedModel) {
      message.error('请先选择训练模型！');
      return;
    }

    form.validateFields().then(() => {
      setIsTraining(true);
      setTrainingProgress(0);
      setTrainingComplete(false);
      setCurrentEpoch(0);
      setTrainingMetrics({
        trainLoss: Math.random() * 2 + 1,
        valLoss: Math.random() * 2 + 1.2,
        trainAcc: Math.random() * 30 + 40,
        valAcc: Math.random() * 25 + 35
      });

      message.success('开始训练模型！');

      const interval = setInterval(() => {
        setTrainingProgress(prev => {
          const newProgress = prev + (100 / epochs);
          const newEpoch = Math.floor(newProgress * epochs / 100);

          setCurrentEpoch(newEpoch);

          // 模拟训练指标改善
          setTrainingMetrics(prevMetrics => ({
            trainLoss: Math.max(0.05, prevMetrics.trainLoss - (Math.random() * 0.1 + 0.02)),
            valLoss: Math.max(0.08, prevMetrics.valLoss - (Math.random() * 0.08 + 0.015)),
            trainAcc: Math.min(98, prevMetrics.trainAcc + (Math.random() * 2 + 0.5)),
            valAcc: Math.min(95, prevMetrics.valAcc + (Math.random() * 1.5 + 0.3))
          }));

          if (newProgress >= 100) {
            clearInterval(interval);
            setIsTraining(false);
            setTrainingComplete(true);
            setCurrentEpoch(epochs);

            const finalAccuracy = 90 + Math.random() * 8;
            const finalLoss = 0.05 + Math.random() * 0.1;

            setTrainingResults({
              finalAccuracy: finalAccuracy.toFixed(1),
              finalLoss: finalLoss.toFixed(4),
              trainingTime: Math.round((epochs * batchSize / 1000) * 10) / 10,
              bestEpoch: Math.round(epochs * 0.8),
              converged: true
            });

            message.success('模型训练完成！');
            return 100;
          }
          return newProgress;
        });
      }, 200);
    }).catch(() => {
      message.error('请完善训练参数！');
    });
  };

  // 停止训练
  const handleStopTraining = () => {
    setIsTraining(false);
    setTrainingProgress(0);
    setCurrentEpoch(0);
    message.warning('训练已停止！');
  };

  // 重置训练
  const handleResetTraining = () => {
    setIsTraining(false);
    setTrainingComplete(false);
    setTrainingProgress(0);
    setCurrentEpoch(0);
    setTrainingResults(null);
    form.resetFields();
    setSelectedModel(null);
    setBatchSize(32);
    setLearningRate(0.001);
    setEpochs(100);
    setOptimizer('adam');
    message.info('训练参数已重置！');
  };

  const selectedModelInfo = getSelectedModelInfo();
  const progressData = getProgressData();

  return React.createElement('div', {
    style: {
      padding: '20px',
      backgroundColor: 'transparent',
      minHeight: '100%'
    }
  }, [
    // 顶部配置区域
    React.createElement(Card, {
      key: 'config-card',
      style: {
        marginBottom: '20px',
        background: 'linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.85) 100%)',
        backdropFilter: 'blur(10px)',
        border: '1px solid rgba(255,255,255,0.3)',
        borderRadius: '12px',
        boxShadow: '0 8px 32px rgba(0,0,0,0.1)'
      },
      bodyStyle: { padding: '20px' }
    }, React.createElement(Form, {
      form: form,
      layout: 'vertical'
    }, [
      React.createElement(Row, {
        key: 'main-row',
        gutter: [20, 16],
        align: 'middle'
      }, [
        React.createElement(Col, {
          key: 'model-col',
          xs: 24,
          sm: 6
        }, React.createElement(Space, {
          direction: 'vertical',
          style: { width: '100%' },
          size: 'small'
        }, [
          React.createElement(Text, {
            key: 'model-text',
            strong: true,
            style: { color: '#1890ff' }
          }, [
            React.createElement(ExperimentOutlined, { key: 'model-icon' }),
            ' 训练模型'
          ]),
          React.createElement(Form.Item, {
            key: 'model-item',
            name: 'model',
            rules: [{ required: true, message: '请选择训练模型！' }],
            style: { marginBottom: 0 }
          }, React.createElement(Select, {
            placeholder: '选择需要训练的模型',
            style: { width: '100%' },
            value: selectedModel,
            onChange: setSelectedModel,
            optionLabelProp: 'label'
          }, modelList.map(model =>
            React.createElement(Option, {
              key: model.value,
              value: model.value,
              label: model.label
            }, React.createElement('div', {
              style: {
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center'
              }
            }, [
              React.createElement('span', { key: 'name' }, model.label),
              React.createElement(Space, { key: 'tags' }, [
                React.createElement(Tag, {
                  key: 'type',
                  color: 'blue',
                  size: 'small'
                }, model.type),
                React.createElement(Tag, {
                  key: 'size',
                  color: 'orange',
                  size: 'small'
                }, model.size)
              ])
            ]))
          )))
        ])),

        React.createElement(Col, {
          key: 'batch-col',
          xs: 24,
          sm: 4
        }, React.createElement(Space, {
          direction: 'vertical',
          style: { width: '100%' },
          size: 'small'
        }, [
          React.createElement(Text, {
            key: 'batch-text',
            strong: true,
            style: { color: '#52c41a' }
          }, [
            React.createElement(BarChartOutlined, { key: 'batch-icon' }),
            ' 批次大小'
          ]),
          React.createElement(Form.Item, {
            key: 'batch-item',
            name: 'batchSize',
            rules: [{ required: true, message: '请输入批次大小！' }],
            style: { marginBottom: 0 }
          }, React.createElement(Input, {
            type: 'number',
            placeholder: '32',
            value: batchSize,
            onChange: e => setBatchSize(Number(e.target.value)),
            min: 1,
            max: 512
          }))
        ])),

        React.createElement(Col, {
          key: 'lr-col',
          xs: 24,
          sm: 4
        }, React.createElement(Space, {
          direction: 'vertical',
          style: { width: '100%' },
          size: 'small'
        }, [
          React.createElement(Text, {
            key: 'lr-text',
            strong: true,
            style: { color: '#fa8c16' }
          }, [
            React.createElement(ThunderboltOutlined, { key: 'lr-icon' }),
            ' 学习率'
          ]),
          React.createElement(Form.Item, {
            key: 'lr-item',
            name: 'learningRate',
            rules: [{ required: true, message: '请输入学习率！' }],
            style: { marginBottom: 0 }
          }, React.createElement(Input, {
            type: 'number',
            placeholder: '0.001',
            value: learningRate,
            onChange: e => setLearningRate(Number(e.target.value)),
            step: 0.0001,
            min: 0.0001,
            max: 1
          }))
        ])),

        React.createElement(Col, {
          key: 'epochs-col',
          xs: 24,
          sm: 4
        }, React.createElement(Space, {
          direction: 'vertical',
          style: { width: '100%' },
          size: 'small'
        }, [
          React.createElement(Text, {
            key: 'epochs-text',
            strong: true,
            style: { color: '#722ed1' }
          }, [
            React.createElement(RocketOutlined, { key: 'epochs-icon' }),
            ' 训练轮数'
          ]),
          React.createElement(Form.Item, {
            key: 'epochs-item',
            name: 'epochs',
            rules: [{ required: true, message: '请输入训练轮数！' }],
            style: { marginBottom: 0 }
          }, React.createElement(Input, {
            type: 'number',
            placeholder: '100',
            value: epochs,
            onChange: e => setEpochs(Number(e.target.value)),
            min: 1,
            max: 1000
          }))
        ])),

        React.createElement(Col, {
          key: 'control-col',
          xs: 24,
          sm: 6
        }, React.createElement(Space, {
          direction: 'vertical',
          style: { width: '100%' },
          size: 'small'
        }, [
          React.createElement(Text, {
            key: 'control-text',
            strong: true,
            style: { color: '#13c2c2' }
          }, [
            React.createElement(PlayCircleOutlined, { key: 'control-icon' }),
            ' 训练控制'
          ]),
          React.createElement(Space, {
            key: 'control-buttons',
            style: { width: '100%' }
          }, [
            React.createElement(Button, {
              key: 'start-btn',
              type: 'primary',
              icon: React.createElement(PlayCircleOutlined),
              onClick: handleStartTraining,
              loading: isTraining,
              disabled: isTraining,
              style: {
                background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                border: 'none',
                borderRadius: '6px'
              }
            }, '开始'),
            React.createElement(Button, {
              key: 'stop-btn',
              danger: true,
              icon: React.createElement(StopOutlined),
              onClick: handleStopTraining,
              disabled: !isTraining
            }, '停止'),
            React.createElement(Button, {
              key: 'reset-btn',
              icon: React.createElement(ReloadOutlined),
              onClick: handleResetTraining
            }, '重置')
          ])
        ]))
      ]),

      React.createElement(Row, {
        key: 'optimizer-row',
        gutter: [20, 16],
        style: { marginTop: '16px' }
      }, React.createElement(Col, {
        key: 'optimizer-col',
        xs: 24,
        sm: 12
      }, React.createElement(Space, {
        direction: 'vertical',
        style: { width: '100%' },
        size: 'small'
      }, [
        React.createElement(Text, {
          key: 'optimizer-text',
          strong: true,
          style: { color: '#eb2f96' }
        }, '优化器选择'),
        React.createElement(Form.Item, {
          key: 'optimizer-item',
          name: 'optimizer',
          rules: [{ required: true, message: '请选择优化器！' }],
          style: { marginBottom: 0 }
        }, React.createElement(Select, {
          style: { width: '100%' },
          value: optimizer,
          onChange: setOptimizer
        }, optimizerOptions.map(opt =>
          React.createElement(Option, {
            key: opt.value,
            value: opt.value
          }, opt.label)
        )))
      ])))
    ])),

    // 进度条
    (isTraining || trainingComplete) && React.createElement(Card, {
      key: 'progress-card',
      style: {
        marginBottom: '20px',
        background: 'rgba(255,255,255,0.9)',
        border: '1px solid rgba(24, 144, 255, 0.3)',
        borderRadius: '8px'
      },
      bodyStyle: { padding: '15px' }
    }, React.createElement(Progress, {
      percent: Math.round(trainingProgress),
      status: trainingComplete ? 'success' : 'active',
      strokeColor: {
        '0%': '#108ee9',
        '100%': '#87d068'
      },
      showInfo: true,
      format: percent => percent + '% (' + currentEpoch + '/' + epochs + ' 轮次)'
    })),

    React.createElement(Row, {
      key: 'main-content-row',
      gutter: [20, 20]
    }, [
      // 训练进度
      React.createElement(Col, {
        key: 'progress-col',
        xs: 24,
        lg: 8
      }, React.createElement(Card, {
        title: React.createElement(Space, null, [
          React.createElement(Avatar, {
            key: 'progress-avatar',
            style: { backgroundColor: '#1890ff' },
            icon: React.createElement(BarChartOutlined),
            size: 'small'
          }),
          '训练进度'
        ]),
        style: {
          backgroundColor: 'rgba(255,255,255,0.95)',
          borderRadius: '12px',
          boxShadow: '0 4px 16px rgba(0,0,0,0.1)',
          border: '1px solid rgba(255,255,255,0.3)'
        },
        bodyStyle: { padding: '20px' }
      }, React.createElement('div', {
        style: { textAlign: 'center' }
      }, [
        React.createElement(Progress, {
          key: 'circle-progress',
          type: 'circle',
          percent: Math.round(trainingProgress),
          size: 100,
          status: trainingComplete ? 'success' : (isTraining ? 'active' : 'normal'),
          strokeColor: {
            '0%': '#108ee9',
            '100%': '#87d068'
          },
          trailColor: 'rgba(0,0,0,0.06)',
          strokeWidth: 8
        }),
        React.createElement('div', {
          key: 'progress-status',
          style: { marginTop: 16 }
        }, React.createElement(Text, {
          style: {
            fontSize: '14px',
            color: isTraining ? '#1890ff' : trainingComplete ? '#52c41a' : '#666'
          }
        }, isTraining ? '🔄 正在训练模型...' :
           trainingComplete ? '✅ 训练完成!' : '⏳ 等待开始训练...')),
        selectedModelInfo && React.createElement('div', {
          key: 'model-info',
          style: {
            marginTop: 12,
            padding: '10px',
            backgroundColor: '#f0f9ff',
            borderRadius: '6px'
          }
        }, [
          React.createElement(Text, {
            key: 'model-name',
            style: { fontSize: '12px', color: '#1890ff' }
          }, selectedModelInfo.label + ' (' + selectedModelInfo.size + ')'),
          React.createElement('div', {
            key: 'model-desc',
            style: {
              fontSize: '10px',
              color: '#999',
              marginTop: '4px'
            }
          }, selectedModelInfo.description)
        ])
      ]))),

      // 训练指标
      React.createElement(Col, {
        key: 'metrics-col',
        xs: 24,
        lg: 16
      }, React.createElement(Card, {
        title: React.createElement(Space, null, [
          React.createElement(Avatar, {
            key: 'metrics-avatar',
            style: { backgroundColor: '#52c41a' },
            icon: React.createElement(ExperimentOutlined),
            size: 'small'
          }),
          '训练指标监控'
        ]),
        style: {
          backgroundColor: 'rgba(255,255,255,0.95)',
          borderRadius: '12px',
          boxShadow: '0 4px 16px rgba(0,0,0,0.1)',
          border: '1px solid rgba(255,255,255,0.3)'
        },
        bodyStyle: { padding: '20px' }
      }, React.createElement(Table, {
        columns: progressColumns,
        dataSource: progressData,
        pagination: false,
        size: 'small',
        bordered: true,
        style: {
          borderRadius: '8px',
          overflow: 'hidden'
        }
      })))
    ]),

    // 系统性能监控（未训练时显示）
    !isTraining && !trainingComplete && React.createElement(Card, {
      key: 'system-monitor-card',
      title: React.createElement(Space, null, [
        React.createElement(Avatar, {
          key: 'system-avatar',
          style: { backgroundColor: '#13c2c2' },
          icon: React.createElement(BarChartOutlined),
          size: 'small'
        }),
        '系统状态'
      ]),
      style: {
        marginTop: '20px',
        backgroundColor: 'rgba(255,255,255,0.85)',
        borderRadius: '8px',
        boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
        border: '1px solid rgba(255,255,255,0.2)'
      },
      bodyStyle: { padding: '16px' }
    }, [
    // 简洁的系统状态（未训练时显示）
    !isTraining && !trainingComplete && React.createElement(Card, {
      key: 'system-status-card',
      title: React.createElement(Space, null, [
        React.createElement(Avatar, {
          key: 'system-avatar',
          style: { backgroundColor: '#13c2c2' },
          icon: React.createElement(BarChartOutlined),
          size: 'small'
        }),
        '系统状态'
      ]),
      style: {
        marginTop: '20px',
        backgroundColor: 'rgba(255,255,255,0.85)',
        borderRadius: '8px',
        boxShadow: '0 2px 6px rgba(0,0,0,0.05)',
        border: '1px solid rgba(255,255,255,0.2)'
      },
      bodyStyle: { padding: '16px' }
    }, React.createElement(Row, {
      gutter: [16, 16],
      align: 'middle'
    }, [
      React.createElement(Col, {
        key: 'status-info-col',
        xs: 24,
        sm: 8
      }, React.createElement('div', {
        style: {
          display: 'flex',
          alignItems: 'center',
          gap: '12px',
          padding: '12px',
          borderRadius: '6px',
          backgroundColor: '#f0f9ff',
          border: '1px solid #e6f7ff'
        }
      }, [
        React.createElement(ThunderboltOutlined, {
          key: 'platform-icon',
          style: { color: '#1890ff', fontSize: '16px' }
        }),
        React.createElement('div', { key: 'platform-info' }, [
          React.createElement('div', {
            key: 'platform-label',
            style: { fontSize: '12px', color: '#666' }
          }, '系统平台'),
          React.createElement('div', {
            key: 'platform-value',
            style: { fontSize: '14px', fontWeight: 'bold', color: '#1890ff' }
          }, 'Windows 10/11')
        ])
      ])),

      React.createElement(Col, {
        key: 'training-info-col',
        xs: 24,
        sm: 8
      }, React.createElement('div', {
        style: {
          display: 'flex',
          alignItems: 'center',
          gap: '12px',
          padding: '12px',
          borderRadius: '6px',
          backgroundColor: '#f6ffed',
          border: '1px solid #b7eb8f'
        }
      }, [
        React.createElement(ExperimentOutlined, {
          key: 'training-icon',
          style: { color: '#52c41a', fontSize: '16px' }
        }),
        React.createElement('div', { key: 'training-info' }, [
          React.createElement('div', {
            key: 'training-label',
            style: { fontSize: '12px', color: '#666' }
          }, '训练状态'),
          React.createElement('div', {
            key: 'training-value',
            style: { fontSize: '14px', fontWeight: 'bold', color: '#52c41a' }
          }, '空闲')
        ])
      ])),

      React.createElement(Col, {
        key: 'ready-info-col',
        xs: 24,
        sm: 8
      }, React.createElement('div', {
        style: {
          display: 'flex',
          alignItems: 'center',
          gap: '12px',
          padding: '12px',
          borderRadius: '6px',
          backgroundColor: '#fff2e8',
          border: '1px solid #ffd591'
        }
      }, [
        React.createElement(RocketOutlined, {
          key: 'ready-icon',
          style: { color: '#fa8c16', fontSize: '16px' }
        }),
        React.createElement('div', { key: 'ready-info' }, [
          React.createElement('div', {
            key: 'ready-label',
            style: { fontSize: '12px', color: '#666' }
          }, '系统就绪'),
          React.createElement('div', {
            key: 'ready-value',
            style: { fontSize: '14px', fontWeight: 'bold', color: '#fa8c16' }
          }, '准备就绪')
        ])
      ]))
    ])),
    ]),

    // 训练结果分析
    trainingResults && React.createElement(Card, {
      key: 'results-card',
      title: React.createElement(Space, null, [
        React.createElement(Avatar, {
          key: 'results-avatar',
          style: { backgroundColor: '#fa8c16' },
          icon: React.createElement(TrophyOutlined),
          size: 'small'
        }),
        '训练结果分析'
      ]),
      style: {
        marginTop: '20px',
        backgroundColor: 'rgba(255,255,255,0.95)',
        borderRadius: '12px',
        boxShadow: '0 4px 16px rgba(0,0,0,0.1)',
        border: '1px solid rgba(255,255,255,0.3)'
      },
      bodyStyle: { padding: '20px' }
    }, React.createElement(Row, {
      gutter: [16, 16]
    }, [
      React.createElement(Col, {
        key: 'accuracy-col',
        xs: 12,
        sm: 6
      }, React.createElement('div', {
        style: {
          textAlign: 'center',
          padding: '15px',
          borderRadius: '8px',
          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
          color: 'white'
        }
      }, [
        React.createElement('div', {
          key: 'accuracy-value',
          style: { fontSize: '24px', fontWeight: 'bold' }
        }, trainingResults.finalAccuracy + '%'),
        React.createElement('div', {
          key: 'accuracy-label',
          style: { fontSize: '12px', opacity: 0.9 }
        }, '最终精度'),
        React.createElement('div', {
          key: 'accuracy-target',
          style: { fontSize: '10px', opacity: 0.7 }
        }, '目标: > 90%')
      ])),

      React.createElement(Col, {
        key: 'loss-col',
        xs: 12,
        sm: 6
      }, React.createElement('div', {
        style: {
          textAlign: 'center',
          padding: '15px',
          borderRadius: '8px',
          background: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
          color: 'white'
        }
      }, [
        React.createElement('div', {
          key: 'loss-value',
          style: { fontSize: '24px', fontWeight: 'bold' }
        }, trainingResults.finalLoss),
        React.createElement('div', {
          key: 'loss-label',
          style: { fontSize: '12px', opacity: 0.9 }
        }, '最终损失'),
        React.createElement('div', {
          key: 'loss-target',
          style: { fontSize: '10px', opacity: 0.7 }
        }, '目标: < 0.1')
      ])),

      React.createElement(Col, {
        key: 'time-col',
        xs: 12,
        sm: 6
      }, React.createElement('div', {
        style: {
          textAlign: 'center',
          padding: '15px',
          borderRadius: '8px',
          background: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
          color: 'white'
        }
      }, [
        React.createElement('div', {
          key: 'time-value',
          style: { fontSize: '24px', fontWeight: 'bold' }
        }, trainingResults.trainingTime + 'h'),
        React.createElement('div', {
          key: 'time-label',
          style: { fontSize: '12px', opacity: 0.9 }
        }, '训练时间'),
        React.createElement('div', {
          key: 'time-target',
          style: { fontSize: '10px', opacity: 0.7 }
        }, epochs + ' 轮次')
      ])),

      React.createElement(Col, {
        key: 'epoch-col',
        xs: 12,
        sm: 6
      }, React.createElement('div', {
        style: {
          textAlign: 'center',
          padding: '15px',
          borderRadius: '8px',
          background: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
          color: 'white'
        }
      }, [
        React.createElement('div', {
          key: 'epoch-value',
          style: { fontSize: '24px', fontWeight: 'bold' }
        }, trainingResults.bestEpoch),
        React.createElement('div', {
          key: 'epoch-label',
          style: { fontSize: '12px', opacity: 0.9 }
        }, '最佳轮次'),
        React.createElement('div', {
          key: 'epoch-target',
          style: { fontSize: '10px', opacity: 0.7 }
        }, '收敛轮次')
      ]))
    ]))
  ]);
};

export default ModelTraining;